<template>
  <div class="personalInfo">
    <div class="pi-title">
      <span class="sign"></span>
      <span>个人资料</span>
    </div>
    <div class="pi-content">
      <div class="pic-line">
        <label for="realName">真实姓名：</label>
        <input type="text" id="realName" disabled :value="data.trueName?data.trueName:''">
      </div>
      <div class="pic-line">
        <label for="myLevel">我的级别：</label>
        <input type="text" id="myLevel" disabled>
      </div>
      <div class="pic-line">
        <label for="teamLevel">团队级别：</label>
        <input type="text" id="teamLevel" disabled :value="data.groupLevel?data.groupLevel:''">
      </div>
      <div class="pic-line">
        <label for="idCard">身份证：</label>
        <input type="text" id="idCard" placeholder="请输入身份证号码" :value="data.idCard?data.idCard:''">
      </div>
      <div class="pic-line">
        <label>开户银行：</label>
        <el-select v-model="bank" placeholder="请选择" id="bankAccount" style="width: 340px;">
          <el-option v-for="item in options" :key="item.value" :label="item.lable" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="pic-line">
        <label for="withdrawalAddress">提现地址：</label>
        <input type="text" id="withdrawalAddress" placeholder="请输入USTD提现地址" :value="data.usdtPickUpAddress?data.usdtPickUpAddress:''">
      </div>
      <div class="pic-line">
        <label for="bankCardNum">银行卡号：</label>
        <input type="text" id="bankCardNum" placeholder="请输入银行卡号" :value="data.bankNo?data.bankNo:''">
      </div>

      <div class="pic-line">
        <label for="getMoneyAddress">收货地址：</label>
        <input type="text" id="getMoneyAddress" placeholder="请输入收货地址" :value="data.gainAddress?data.gainAddress:''">
      </div>
      <!-- <div class="pic-line">
        <label for="accountBranch">开户支行：</label>
        <input type="text" id="accountBranch" placeholder="请输入开户支行" :value="data.openBank?data.openBank:''">
      </div> -->
      <div class="pic-line">
        <label for="iphone">手机号码：</label>
        <input type="text" id="iphone" placeholder="请输入手机号码" :value="data.phone?data.phone:''">
      </div>
      <div class="pic-line">
        <label for="verifyCode">验证码：</label>
        <input type="number" id="verifyCode" placeholder="请输入验证码">
        <div class="getCode" @click="settime">获取验证码</div>
      </div>
      <div class="saveBtn" @click="preservation">保存</div>
      <div class="cancelBtn">取消</div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  name: "personalInfo",
  data() {
    return {
      options: [
        {
          value: "中国工商银行",
          label: "中国工商银行"
        },
        {
          value: "中国建设银行",
          label: "中国建设银行"
        },
        {
          value: "中国农业银行",
          label: "中国农业银行"
        },
        {
          value: "交通银行",
          label: "交通银行"
        },
        {
          value: "平安银行",
          label: "平安银行"
        },
        {
          value: "中国民生银行",
          label: "中国民生银行"
        },
        {
          value: "招商银行",
          label: "招商银行"
        },
        {
          value: "中国银行",
          label: "中国银行"
        },
        {
          value: "中国邮政储蓄",
          label: "中国邮政储蓄"
        },
        {
          value: "成都银行",
          label: "成都银行"
        },
        {
          value: "浦发银行",
          label: "浦发银行"
        },
        {
          value: "兴业银行",
          label: "兴业银行"
        },
        {
          value: "中国光大银行",
          label: "中国光大银行"
        },
        {
          value: "中信银行",
          label: "中信银行"
        },
        {
          value: "华夏银行",
          label: "华夏银行"
        },
        {
          value: "广发银行",
          label: "广发银行"
        }
      ],
      data: {}, //个人信息
      bank: "", //开户银行
      user: localStorage.getItem("userData"),
      code: $.trim($("#verifyCode").val()) //验证码
    };
  },
  methods: {
    // 倒计时  获取验证码
    settime() {
      u.yzm(
        {
          phone: this.data.phone
        },
        data => {
          // console.log(data)
          this.$message({
            message: "验证码发送成功",
            type: "success"
          });
        }
      );
      let count = 60;
      $(".getCode")
        .css("pointer-events", "none")
        .text(count + "秒后重新发送");
      t.timer = setInterval(function() {
        if (count > 0) {
          count = count - 1;
          $(".getCode").text(count + "秒后重新发送");
        } else {
          $(".getCode").css("pointer-events", "");
          $(".getCode").text("获取验证码");
          count = 60;
          clearInterval(timer);
        }
      }, 1000);
    },
    //保存
    preservation() {
      //身份证验证
      let reg = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
      if (!reg.test($.trim($("#idCard").val()))) {
        this.$message.error("请填写有效身份证！");
        return;
      }
      if (
        $.trim($("#bankAccount").val()) == "" &&
        $.trim($("#accountBranch").val()) == ""
      ) {
        this.$message.error("开户银行不能为空");
        return;
      }
      if ($.trim($("#bankCardNum").val()).length < 10) {
        this.$message.error("请输入正确的银行卡号");
        return;
      }
      if ($.trim($("#withdrawalAddress").val()) == "") {
        this.$message.error("USTD提现地址不能为空");
        return;
      }
      if ($.trim($("#getMoneyAddress").val()) == "") {
        this.$message.error("收货地址不能为空");
        return;
      }
      //   if($.trim($('#accountBranch').val())=='')  {
      //       this.$message.error('开户支行不能为空');
      //       return
      //  }
      console.log($("#bankAccount").val());
      //  console.log(this.code)
      //  if($.trim($('#verifyCode').val())!==this.code)  {
      //       this.$message.error('请输入正确的验证码');
      //       return
      //  }
      //更新人员信息接口
      u.updateMember(
        {
          id: localStorage.getItem("userID"),
          phone: this.data.phone,
          code: $.trim($("#verifyCode").val()),
          idCard: $.trim($("#idCard").val()), //身份证
          bank: $.trim($("#bankAccount").val()), //开户银行
          bankNo: $.trim($("#bankCardNum").val()), //银行卡号
          usdtPickUpAddress: $.trim($("#withdrawalAddress").val()), //USTD提现地址
          openBank: $.trim($("#accountBranch").val()), //USTD提现地址
          gainAddress :$.trim($("#getMoneyAddress").val()),//收货地址
        },
        data => {
          //  console.log(data);
          if (data && data.code == 200) {
            this.$message.success("个人资料保存成功");
            window.location.reload();
          } else {
            this.$message.error(data.message);
          }
        }
      );
    }
  },
  created() {
    u.userInfo(
      {
        id: localStorage.getItem("userID")
      },
      data => {
        if (data && data.code !== "200") {
          return;
        }
        this.data = data.data;
        //开户银行
        this.bank = data.data.bank;
        //我的级别
        if (this.data.memberLevel == 0) {
          $("#myLevel").val("普通会员");
        } else if (this.data.memberLevel == 1) {
          $("#myLevel").val("一星会员");
        } else if (this.data.memberLevel == 2) {
          $("#myLevel").val("二星会员");
        } else if (this.data.memberLevel == 3) {
          $("#myLevel").val("三星会员");
        } else if (this.data.memberLevel == 4) {
          $("#myLevel").val("四星会员");
        }
        if (this.data.idCard) {
          // $('#idCard').attr("disabled","disabled")
        }
        if (this.bank) {
          $("#bankAccount").attr("disabled", "disabled");
        }
        if (this.data.bankNo) {
          //  $('#bankCardNum').attr("disabled","disabled")
        }
        if (this.data.usdtPickUpAddress) {
          $("#withdrawalAddress").attr("disabled", "disabled");
        }
        if (this.data.openBank) {
          //  $('#accountBranch').attr("disabled","disabled")
        }
        if (this.data.phone) {
          $("#iphone").attr("disabled", "disabled");
        }
      }
    );
  }
};
</script>
<style lang="stylus" type='text/stylus' scoped>
.el-select .el-input.is-focus .el-input__inner {
  border-color: #ffb001 !important;
}

.personalInfo {
  width: 100%;
  height: 100%;
  background: white;

  .pi-title {
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #282828;
    border-bottom: 1px solid #f4f5f6;

    span {
      vertical-align: middle;
    }

    .sign {
      display: inline-block;
      margin-right: 10px;
      background: #ffb001;
      width: 5px;
      height: 18px;
    }
  }

  .pi-content {
    padding: 34px 30px;
    width: 100%;
    height: calc(100% - 50px);
    overflow-y: auto;

    .pic-line {
      margin-bottom: 36px;
      height: 40px;

      label {
        display: inline-block;
        width: 135px;
        font-size: 14px;
        color: #3d3d3d;
      }

      input {
        padding: 0 14px;
        width: 340px;
        height: 40px;
        font-size: 14px;
        color: #747474;
        outline: none;
        border-radius: 3px;
        border: 1px solid #e6e9ed;

        &:focus {
          border-color: #ffb001;
        }

        &::-webkit-input-placeholder {
          color: #cccccc;
        }

        &:-moz-placeholder {
          color: #cccccc;
        }
      }

      #verifyCode {
        width: 233px;
      }

      .getCode {
        display: inline-block;
        width: 110px;
        height: 40px;
        font-size: 14px;
        color: white;
        background: #ffb001;
        text-align: center;
        line-height: 40px;
        border-radius: 2px;
        vertical-align: top;
        cursor: pointer;
      }
    }

    .saveBtn {
      display: inline-block;
      margin: 14px 15px 0 141px;
      width: 78px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: white;
      text-align: center;
      border-radius: 2px;
      background: #ffb001;
      cursor: pointer;
    }

    .cancelBtn {
      display: inline-block;
      margin-top: 14px;
      width: 78px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #ffb001;
      text-align: center;
      border-radius: 2px;
      border: 1px solid #ffb001;
      cursor: pointer;
    }
  }
}
</style>
<style lang='less'>

</style>

